<template>
    <view class="header">
        <image class="img-title" src="../../static/icon/back-btn.png" @click="navigateBack" mode="" />
        <view class="title">{{ $t('documentary.list') }}</view>
    </view>
    <view class="main">
        <view class="item" v-for="(item, index) in userDocument" :key="index">
            <view class="first-line">
                <view class="name">{{ item.sponsorName }}</view>
                <view class="price">{{ `${item.inputMoney}${$t('documentary.yuan')}` }}</view>
            </view>
            <view class="second-line">
                <view class="left-radius radius"></view>
                <view class="left">
                    <view class="value">{{ item.totalRate }}</view>
                    <view class="key">{{ $t('documentary.history-total') }}</view>
                </view>
                <view class="right-radius radius"></view>
                <view class="right">
                    <view class="value">{{ item.inputRate }}</view>
                    <view class="key">{{ $t('documentary.history-yesterday') }}</view>
                </view>
            </view>
            <view class="third-line">
                <view class="left">
                    <view class="buyTime">{{ item.buyTime }}</view>
                    <view class="buy">{{ $t('documentary.history-bought') }}</view>
                </view>
                <view class="right">
                    <view class="lockTime">{{ item.lockTime }}</view>
                    <view class="lock">{{ $t('documentary.history-locken') }}</view>
                </view>
            </view>
        </view>
    </view>
</template>

<script setup>
import { requestApi } from '@/api';
import { ref, onMounted } from 'vue';
import { onLoad, onShow } from '@dcloudio/uni-app';
import { formateDate } from '@/utils/formatter';
import { Decimal } from 'decimal.js';


/*
    buyTime:1677902532000
    endTime: 1677170237000
    id: 1
    inputMoney: 300
    lockTime: null
    maxProfitRate: 0.5
    minInvest: 20
    minProfitRate: 0.2
    realProfitRate: 0.2
    scale: 20000
    sponsorId: 1
    sponsorName: "gsg"
    startTime: 1675874233000
    userId: 53
*/

const userDocument = ref([])
async function getUserDocument() {
    const { status, data } = await requestApi.getUserDocument()
    if (status == 0) {
        userDocument.value = data.map(item => {
            let { endTime, lockTime, buyTime, inputMoney, realProfitRate } = item

            inputMoney = new Decimal(inputMoney)
            realProfitRate = new Decimal(realProfitRate)
            item.inputRate = inputMoney.plus(realProfitRate) //昨日收益
            item.totalRate = inputMoney.times(realProfitRate.plus(1))// 总价值

            item.test = realProfitRate.plus(1)

            item.buyTime = formateDate(new Date(buyTime), 'yyyy-MM-dd hh:mm')
            item.endTime = formateDate(new Date(endTime), 'yyyy-MM-dd hh:mm')
            item.lockTime = formateDate(new Date(lockTime), 'yyyy-MM-dd hh:mm')

            // console.log(item);
            return item
        })
    }
}



onShow(() => {
    getUserDocument()
})



// 返回上一页
// 返回上一层
function navigateBack() {
    let canNavBack = getCurrentPages()
    if (canNavBack && canNavBack.length > 1) {
        uni.navigateBack()
    } else {
        history.back();
    }
}

</script>

<style lang="scss">
page {
    background-color: $uni-bg-color-dark;
}

.header {
    width: 100%;
    height: 88rpx;
    // #ifndef H5
    padding-top: 88rpx;
    // #endif
    background-color: $uni-bg-color-dark;
    position: fixed;
    top: 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    z-index: 99;


    .title {
        text-align: center;
        color: #fff;
        margin: 0 auto;
        padding-right: 104rpx;
        font-size: 32rpx;
    }

    .img-title {
        width: 58rpx;
        height: 58rpx;
        margin-left: 46rpx;
    }
}

.main {
    // #ifndef H5
    margin-top: 176rpx;
    // #endif
    margin-top: 88rpx;

    .item {
        background-color: #292A36;
        width: 670rpx;
        height: 324rpx;
        margin: 0 auto 32rpx;
        border-radius: 28rpx;
        padding: 13rpx 24rpx 0rpx;
        position: relative;

        .first-line {
            display: flex;
            justify-content: space-between;
            color: #7E8394;
        }

        .second-line {
            display: flex;
            justify-content: space-between;

            .left,
            .right {
                display: flex;
                flex-direction: column;
                align-items: center;
                margin-top: 30rpx;

                .value {
                    color: #fff;
                    font-size: 48rpx;
                }

                .key {
                    color: #999;
                    margin-top: 15rpx;
                }
            }

            .left {
                margin-left: 75rpx;
            }

            .right {
                margin-right: 75rpx;
            }




            .radius {
                position: absolute;
                top: calc(50% - 13rpx);
                background-color: $uni-bg-color-dark;
                width: 23rpx;
                height: 23rpx;
                border-radius: 13rpx;
            }

            .left-radius {
                left: -13rpx;
            }

            .right-radius {
                right: -13rpx;
            }


        }

        .third-line {
            border-top: solid #20222C 2rpx;
            margin-top: 30rpx;
            display: flex;
            justify-content: space-between;

            .left,
            .right {
                display: flex;
                font-size: 20rpx;
                margin-top: 20rpx;

                .buyTime,
                .lockTime {
                    color: #7E8394;
                }

                .buy,
                .lock {
                    color: #4862C0;
                    margin-left: 20rpx;
                }
            }
        }
    }
}
</style>